<!DOCTYPE html>
<html lang="en">
<link href="../layui/css/layui.css" rel="stylesheet"/>
<script src="../layui/layui.js"></script>
<script src="../layui/js/public.js"></script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table id="roles" lay-filter="roles"></table>

<script type="text/html" id="crud">
    <a class="layui-btn  layui-btn-xs" lay-event="del">编辑</a>
</script>

<div id="tree" style="display: none"></div>
</body>

<script type="text/javascript">
    layui.use(['table','tree'], function () {
        var table = layui.table;
        var tree = layui.tree;
        var $ = layui.$;
        table.render({
            elem: '#roles'
            , id: 'roles'
            , height: 'full'
            , url: baseurl + '/role/list'
            , method: 'post'
            , where: {type:1}
            , page: true
            , cols: [[
                {field: 'id', title: '版本'},
                {field: 'name', title: '下载地址'},
                {field: 'description', title: '操作', fixed: 'right', sort: true, toolbar: '#crud', width: '15%'}
            ]]
            , headers: {"authorization": localStorage.getItem("token") == null ? "" : localStorage.getItem("token")}
            , parseData: function (res) {
                if (res.code != 200) {
                    return {
                        "code": 1,
                        "msg": res.message,
                        "count": 0,
                        "data": []
                    }
                }
                return {
                    "code": 0, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.length, //解析数据长度
                    "data": res.data //解析数据列表
                }
            }
        });
        $.ajax({
            url: baseurl+"/power/list",
            type:"post",
            success:function (data) {
                tree.render({
                    elem: '#tree'  ,//绑定元素
                    id:'tree',
                    showCheckbox:true,
                    defaultNodeName:'name'
                    ,data: data.data
                });

            }
        });

        table.on('tool(roles)', function (obj) {
            var layEvent = obj.event;
            var data = obj.data;
            if (layEvent === 'del') {
                $.ajax({
                    url: baseurl+"/role/get/power",
                    type:"post",
                    data: {"roleId": data.id},
                    success:function (data) {
                        tree.setChecked('tree', data.data.map(a => a.id));
                    }
                });
                layer.open({
                    area: ['500px', '300px'],
                    type:1,
                    title: '在线调试',
                    content: $('#tree'),
                    btn: ['确定'],
                    yes: function(index, layero){
                        let checkData = tree.getChecked('tree');
                        var ids = [];
                        checkData.forEach((v,i) => {
                           ids = ids.concat(v.children.map(a => a.id))
                        });
                        $.ajax({
                            url: baseurl+"/role/add/power",
                            type:"post",
                            data: {"roleId": data.id,"powers":JSON.stringify(ids)},
                            success:function (data) {
                            }
                        });
                    }
                });
            }
        })
    });
</script>
</html>